<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" v-show="showSearch">
            <el-form-item label="活动名称" prop="detailName">
                <el-input v-model="queryParams.detailName" placeholder="请输入活动名称" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="活动类型" prop="activityType">
                <el-select v-model="queryParams.activityType" placeholder="请选择活动类型" clearable size="small">
                    <el-option v-for="item in dict.type.activity_type" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" prop="memberName">
                <el-input v-model="queryParams.memberName" placeholder="请输入客户名称" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="所属部门" prop="storeName">
                <el-input v-model="queryParams.storeName" placeholder="请输入所属部门" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="核销人员" prop="writeOffUser">
                <el-input v-model="queryParams.writeOffUser" placeholder="请输入核销人员" clearable size="small" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" v-hasPermi="['order:writeoff:query']">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['order:writeoff:export']">导出</el-button>
                <el-button type="primary" plain icon="el-icon-check" size="mini" :loading="exportLoading" @click="handleWriteoff" v-hasPermi="['order:writeoff:writeoff']">快速核销</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="list">
            <el-table-column min-width="100" label="活动类型" align="center" prop="activityType">
                <template slot-scope="scope">
                    {{ scope.row.activityType | typeFilter(dict.type.activity_type) }}
                </template>
            </el-table-column>
            <el-table-column min-width="200" label="活动名称" align="center" prop="detailName" />
            <el-table-column min-width="200" label="核销码" align="center" prop="orderNo" />
            <el-table-column min-width="160" label="客户名称" align="center" prop="memberName" />
            <el-table-column min-width="160" label="联系电话" align="center" prop="memberPhone" />
            <el-table-column min-width="120" label="核销人员" align="center" prop="writeOffUser" />
            <el-table-column min-width="160" label="核销时间" align="center" prop="writeOffTime" />
            <!--      <el-table-column
        min-width="160"
        label="核销门店名称"
        align="center"
        prop="storeName"
        show-overflow-tooltip
      /> -->
            <el-table-column min-width="140" label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 添加或修改参数配置对话框 -->
        <el-dialog :title="writeOff.title" :visible.sync="writeOff.open" width="50%" append-to-body :before-close="cancel">
            <p style="margin-left: 50px;color: #b5b6b9;margin-top: -20px;">本页可快速核销奖品，请客户先出示商品核销码，再核销；</p>
            <el-row :gutter="15">
                <el-form :model="writeOff.queryParams" ref="writeOffQueryForm" label-width="30px" :inline="false">
                    <el-col :span="14">
                        <el-form-item label="" prop="id">
                            <el-input v-model.trim="writeOff.queryParams.id" placeholder="请输入核销码" clearable size="small" @keyup.enter.native="searchHandleQuery" :style="{ width: 'calc(100% - 100px)', marginRight: '15px' }" />
                            <el-button :loading="mmvloading" type="primary" icon="el-icon-search" size="mini" @click="searchHandleQuery">核销</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <el-row :gutter="15" v-if="activityShow">
                <el-form :model="formData" ref="formData" :rules="rules" :inline="false" label-width="100px">
                    <el-col :span="12">
                        <el-form-item label="活动类型" prop="activityType">
                            <el-select v-model.number="formData.activityType" :disabled="disabled" placeholder="请选择活动类型" clearable :style="{ width: '100%' }">
                                <el-option v-for="item in dict.type.activity_type" :key="item.value" :label="item.label" :value="parseInt(item.value)" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活动名称" prop="activityName">
                            <el-input v-model.trim="formData.activityName" :disabled="disabled" placeholder="请输入活动名称" clearable :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="formData.activityType == 1">
                        <el-form-item label="支付金额" prop="amount">
                            <el-input v-model.number="formData.amount" :disabled="disabled" placeholder="请输入支付金额" clearable :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活动时间" prop="time">
                            <el-input v-model="formData.time" :disabled="disabled" placeholder="请输入商品名称" clearable :style="{ width: '100%' }"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" :style="{ marginTop: '15px' }">
                        <el-row v-for="(item, index) in formData.serviceInfoList" :key="index">
                            <el-col :span="12">
                                <el-form-item label="商品名称">
                                    <el-input v-model="item['shoppingServiceName']" :disabled="disabled" clearable :style="{ width: '100%' }"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="可使用数量">
                                    <el-input v-model.trim="item['remainingNumber']" :disabled="disabled" clearable :style="{ width: '100%' }"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="核销数量" :prop="'serviceInfoList.' + 0 + '.number'">
                                    <el-input v-model.number="formData.serviceInfoList[index].number" placeholder="请输入核销数量" clearable :style="{ width: '100%' }"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer" :style="{ textAlign: 'center' }" v-if="activityShow">
                <el-button type="primary" @click="submitForm">确定核销</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    getWriteOffList,
    exportWriteOffList,
    writeOff,
} from '@/api/order/writeoff'

import { getInfoFromWriteoff } from '@/api/order/activity'

export default {
    name: 'OrderActive',
    dicts: ['activity_type'],
    data() {
        return {
            mmvloading: false,
            //核销数据
            writeOff: {
                open: false,
                title: '快速核销',
                queryParams: {
                    id: '',
                },
            },
            activityShow: false,
            formData: {
                activityOrderNo: '',
                activityType: null,
                activityName: '',
                amount: '',
                time: '',
                serviceInfoList: [],
            },
            rules: {
                serviceInfoList: [
                    {
                        number: [
                            {
                                required: true,
                                message: '请输入核销数量',
                                trigger: 'blur',
                            },
                            {
                                required: true,
                                pattern: /^([0-9]\d*)$/,
                                message: '只能输入整数',
                                trigger: 'blur',
                            },
                        ],
                    },
                ],
            },
            disabled: true,
            showSearch: true,
            // 表格遮罩
            loading: false,
            // 表格数据
            list: [],
            total: 1,
            // 导出遮罩层
            exportLoading: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                detailName: '',
                activityType: null,
                memberName: '',
                storeName: '',
                writeOffUser: '',
            },
        }
    },
    filters: {
        typeFilter(val, type) {
            if (val === null) return null
            let data = type.filter((item) => {
                return val == item.value
            })
            if (data.length) {
                return data[0].label
            } else {
                return val
            }
        },
    },
    created() {
        this.getList()
    },
    methods: {
        handleWriteoff() {
            this.writeOff.open = true
        },
        //查询核销数据
        searchHandleQuery() {
            if (this.writeOff.queryParams.id === '') {
                this.$message.error('请输入核销码！')
                return false
            }
            this.mmvloading = true;
            setTimeout(() => {
                this.mmvloading = false;
            }, 2e3);
            getInfoFromWriteoff(this.writeOff.queryParams).then((res) => {
                if (res.code == 0) {
                    this.$message.error('抱歉,无效码')
                } else {
                    this.activityShow = true
                    this.formData = res.data
                    this.formData.serviceInfoList = res.data.serviceInfoList.map((item) => {
                        item.number = item.remainingNumber == 1 ? 1 : null
                        return item
                    })
                    console.log(this.formData.serviceInfoList)
                    this.formData.time =
                        res.data.activityStartTime + ' - ' + res.data.activityEndTime
                }

            })
        },
        /** 查询租户管理列表 */
        getList() {
            this.loading = true
            getWriteOffList(this.queryParams).then((response) => {
                this.list = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm('queryForm')
            this.handleQuery()
        },
        /** 详情按钮操作 */
        handDetail(row) {
            this.$router.push({
                path: '/order/writeoff/detail/' + row.id,
            })
        },
        // 提交按钮
        submitForm() {
            console.log(this.formData)
            let serviceInfoList = []
            this.formData.serviceInfoList.map((item) => {
                serviceInfoList.push({
                    serviceNo: '' + item.serviceNo,
                    number: item.number,
                })
            })
            let query = {
                orderNo: this.formData.activityOrderNo,
                couponId: '',
                serviceInfoList: serviceInfoList,
            }
            this.$refs['formData'].validate((valid) => {
                if (!valid) {
                    this.$message.error('验证不通过，请检查输入')
                    return
                } else {
                    writeOff(query).then((res) => {
                        this.$message.success(res.msg)
                        this.cancel()
                        this.getList()
                    })
                }
            })
        },
        // 取消按钮
        cancel() {
            this.resetForm('writeOffQueryForm')
            this.resetForm('formData')
            this.activityShow = false
            this.writeOff.open = false
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = {
                detailName: this.queryParams.detailName,
                typeName: this.queryParams.typeName,
                memberName: this.queryParams.memberName,
                storeName: this.queryParams.storeName,
                writeOffUser: this.queryParams.writeOffUser,
            }
            this.$modal
                .confirm('是否确认导出活动订单核销数据项？')
                .then(() => {
                    this.exportLoading = true
                    exportWriteOffList(queryParams)
                        .then((res) => {
                            this.$download.name(res.msg)
                            this.exportLoading = false
                        })
                        .catch((err) => {
                            this.exportLoading = false
                        })
                })
                .catch(() => { })
        },
    },
}
</script>
